import PropTypes from 'prop-types'
import React, { memo, useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts/core'
import {
    TooltipComponent,
    LegendComponent,
    TitleComponent
} from 'echarts/components'
import { PieChart, } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { ChartPieWarpper } from './style'

import { calcZoomAndScale } from "@/utils"


echarts.use([TooltipComponent, TitleComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout])



echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

const index = memo((props) => {
    const { height = "120px", percent = 0, params = {} } = props
    const elRef = useRef()
    const [zoom, setZoom] = useState()
    const [scale, setScale] = useState()

    useEffect(() => {
        let myChart = echarts.init(elRef.current);
        function chartResize() {
            const { _zoom, _scale } = calcZoomAndScale()
            setScale(_scale)
            setZoom(_zoom)
        }
        function initChart() {
            const option = {
                tooltip: {
                    show: false,
                },
                series: [
                    {
                        name: 'circle',
                        type: 'pie',
                        radius: params.radius || ['60%', '85%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: Number(percent),
                                name: '占比',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        // 颜色渐变
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: params.startColor || '#4FADFD' // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: params.endColor || '#28E8FA' // 100% 处的颜色1
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                name: '剩余',
                                value: 100 - Number(percent),
                                itemStyle: {
                                    color: '#0f253e'
                                }
                            }
                        ]
                    }
                ]
            }
            option && myChart.setOption(option);
            chartResize()
        }
        initChart()
        window.addEventListener("resize", chartResize)
        return () => {
            window.removeEventListener("resize", chartResize)
        }
    }, [])
    return (
        <ChartPieWarpper height={height}>
            <div ref={elRef} className="container" style={{ zoom: zoom, transform: "scale(" + scale + ")", transformOrigin: '0 0' }}></div>
        </ChartPieWarpper>
    )
})

index.propTypes = {
    height: PropTypes.string,
    data: PropTypes.array
}

export default index